<template>
  <div class="airspaceApplication">
    <div class="container">
      <div class="up-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item :label="$t('dataUser.name')">
            <el-input
              v-model="queryParams.userName"
              :placeholder="$t('dataUser.dimensionName')"
              maxlength="20"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('dataUser.phone')">
            <el-input
              v-model="queryParams.phoneNumber"
              :placeholder="$t('dataUser.dimensionPhone')"
              maxlength="11"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('dataUser.email')">
            <el-input
              v-model="queryParams.email"
              :placeholder="$t('dataUser.dimensionEmail')"
              maxlength="50"
              clearable
            />
          </el-form-item>
          <div class="buttonStyle">
            <el-button
              class="searchButton"
              type="primary"
              icon="Search"
              @click="handleQuery"
              >{{ $t("dataUser.search") }}</el-button
            >
            <el-button
              class="refreshButton"
              icon="Refresh"
              @click="resetQuery"
              >{{ $t("dataUser.reset") }}</el-button
            >
          </div>
        </el-form>
      </div>
      <div class="down-container">
        <el-table
          :data="tableData"
          stripe
          :border="true"
          max-height="60vh"
          style="width: 100%"
        >
          <el-table-column
            :label="$t('dataUser.serialNumber')"
            type="index"
            :index="indexMethod"
            width="85"
            align="center"
          />
          <el-table-column
            :label="$t('dataUser.operate')"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button link type="primary" @click="handleDetail(scope.row)">{{
                $t("dataUser.detail")
              }}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('dataUser.name')"
            prop="userName"
            width="180"
            align="center"
          />
          <el-table-column
            :label="$t('dataUser.gender')"
            prop="sex"
            width="180"
            align="center"
          />
          <el-table-column
            :label="$t('dataUser.nationality')"
            prop="nationality"
            width="180"
            align="center"
          />
          <el-table-column
            :label="$t('dataUser.phoneNumber')"
            prop="phoneNumber"
            width="180"
            align="center"
          />
          <el-table-column
            :label="$t('dataUser.email')"
            prop="email"
            :show-overflow-tooltip="true"
            width="200"
            align="center"
          />
          <el-table-column
            :label="$t('dataUser.address')"
            prop="residentialAddress"
            :show-overflow-tooltip="true"
            width="300"
            align="center"
          />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryCurrent.pageNum"
          v-model:limit="queryCurrent.pageSize"
          @pagination="getList"
          class="pagination"
        />
      </div>
    </div>
  </div>
</template>
<script setup name="dataUser">
import { useRouter } from "vue-router";
import { onMounted, reactive, ref, toRefs } from "vue";
import { getPersonList } from "@/api/dataManagement/dataUser";

const router = useRouter();
const total = ref(1);
const data = reactive({
  queryParams: {
    userName: "",
    phoneNumber: "",
    email: "",
  },
  queryCurrent: {
    pageNum: 1,
    pageSize: 10,
  },
  tableData: [],
});
const { queryCurrent, queryParams, tableData } = toRefs(data);

function indexMethod(index) {
  // 当前页码
  const currentPage = queryCurrent.value.pageNum;
  // 每页显示的数据条数
  const pageSize = queryCurrent.value.pageSize;
  // 上一页最后一个编号
  const prevLastIndex = (currentPage - 1) * pageSize;
  // 当前行的实际索引
  const truelndex = index + prevLastIndex;
  // 如果当前行的索引大于等于当前页的最大索引，
  // 则使用当前行的实际索引，否则使用当前行的原始索引
  return truelndex >= currentPage * pageSize
    ? truelndex
    : index + prevLastIndex + 1;
}

function getList() {
  getPersonList(queryCurrent.value, queryParams.value).then((res) => {
    if (res.code === 200) {
      console.log(res);
      tableData.value = res.rows;
      total.value = res.total;
    }
  });
}
// 搜索
function handleQuery() {
  getList();
}

// 重置
function resetQuery() {
  queryParams.value = {
    userName: "",
    phoneNumber: "",
    email: "",
    pageNum: 1,
    pageSize: 10,
  };
  getList();
}

// 详情
function handleDetail(val) {
  router.push({
    name: "DataUserDetail",
    query: { personId: val.userId },
  });
}

function headClass({ row, rowIndex }) {
  if (rowIndex === 0) {
    return {
      height: "56px",
      background: "#F4F4F4",
      color: "#333333",
      fontSize: "16px",
      fontWeight: "400",
    };
  }
}

onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.airspaceApplication {
  width: 100%;
  height: 100%;

  .container {
    position: relative;
    width: calc(100% - 40px);
    height: 92%;
    margin: 0 20px 20px;
    border-radius: 10px;
    background: white;

    .pagination {
      position: absolute;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
    }

    .up-container {
      padding: 30px 20px 24px;
      width: 100%;
      height: 85px;
      border-radius: 10px;
      background-color: #ffffff;

      :deep .el-form .el-form-item__label {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
      }
      .searchButton {
        width: 90px;
        height: 34px;
        border-radius: 4px;
        color: #ffffff;
        background-color: #2bc17b;
        font-size: 14px;
        margin: 0;
      }

      .buttonStyle {
        position: absolute;
        right: 0px;
        top: -45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 200px;
        height: 40px;
      }

      .refreshButton {
        width: 90px;
        height: 34px;
        border-radius: 4px;
        color: #ffffff;
        font-size: 14px;
        background: #ffb700;
        margin: 0;
      }
      :deep .el-form--inline .el-form-item {
        display: inline-flex;
        vertical-align: middle;
        margin-right: 40px;
        margin-bottom: 19px;
        align-items: center;
      }

      :deep .el-form-item__content {
        width: auto;
        height: 36px;
        border-radius: 4px;
        background: rgb(255, 255, 255);
        border: 1px solid rgb(220, 223, 230);
      }

      :deep .el-input__wrapper {
        box-shadow: none;
        height: 34px;
        width: 100% !important;
      }

      :deep .el-input {
        width: 270px;
        height: 34px;
      }

      :deep .el-select {
        width: 270px;
        height: 34px;
        //display: flex;
        //align-items: center;
        :deep .el-input {
          height: 34px;
        }
      }
    }
    .down-container {
      margin: 10px 0 0;
      background-color: #ffffff;
      border-radius: 4px;
      height: 84%;
    }
    :deep .el-table__footer-wrapper,
    .el-table__header-wrapper {
      background-color: #f4f4f4;
      height: 56px;
    }

    :deep .el-table__header {
      height: 100%;
      background-color: #f4f4f4;
    }

    :deep .el-table .el-table__cell {
      text-align: center;
    }

    :deep .el-table__row {
      height: 50px;
    }

    :deep .el-dialog:not(.is-fullscreen) {
      margin-top: 36vh !important;
    }
    :deep .el-dialog__body {
      text-align: center;
      display: flex;
      justify-content: center;
      padding: 0px calc(var(--el-dialog-padding-primary) + 5px) 20px !important;
    }
    :deep .el-dialog__footer {
      padding-top: 0;
    }

    .dialog-footer {
      :deep .el-button:nth-child(1) {
        border-color: #ededed;
      }
      :deep .el-button {
        width: 81px;
        height: 32px;
        font-size: 12px;
      }
    }
  }
}
</style>
